<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch,computed } from 'vue'
const props = defineProps(['data'])
// 计算总百分比（始终为100%）
// 定义颜色配置
const defaultColors = ['#BFBFBF', '#F4EA2A', '#1AFA29', '#D81E06', '#E98F36']
// const twoItemColors = ['#D81E06', '#1AFA29']
const fourItemColors = ['#D81E06','#E98F36', '#F4EA2A', '#1AFA29']
watch(
  () => props.data,
  (val) => {
    console.log(val)
  }
)

const options = ref({
  color: defaultColors,
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 0,
    top: 20,
    textStyle: {
      color: '#8FE1FF',
      fontSize: 18
    },
    // 格式化图例文本，显示名称、数值和百分比
    formatter: function(name: string) {
      // 从系列数据中找到对应项
      const seriesData = options.value.series[0].data as Array<{name: string, value: number}>
      const item = seriesData.find(item => item.name === name)

      if (!item) return name

      // 使用富文本格式拼接
      return `${name}: ${item.value}`
    },
    data: []
  },
  series: [
    {
      type: 'pie',
      center: ['30%', '50%'],
      radius: ['60%', '85%'],
      avoidLabelOverlap: false,
      labelLine: {
        show: false
      },
      // 中心显示总百分比的配置
      label: {
        show: true,
        position: 'center',
        formatter: function() {
          // 获取系列数据
          const seriesData = options.value.series[0].data as Array<{name: string, value: number, TTLQty: number, Per: string}>
          const total = seriesData[0].TTLQty
          const totalPercentage = seriesData[0].Per

          // 构建中心文本，显示总数量和100%
          return `数量: ${total}\n${totalPercentage}`
        },
        color: '#FFFFFF',
        fontSize: 16,
        fontWeight: 'bold',
        lineHeight: 24 // 行高，确保文本垂直居中
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      // label: {
      //   formatter: '{b}: {d}%', // 显示名称和百分比
      //   color: '#8FE1FF',
      //   fontSize: 22
      // },
      // emphasis: {
      //   itemStyle: {
      //     shadowBlur: 10,
      //     shadowOffsetX: 0,
      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
      //   }
      // },
      data: []
    }
  ]
})

watch(
  () => props.data,
  (val) => {
    const { list } = val
    // 根据数据数量动态设置颜色
    options.value.color = list.length === 4 ? fourItemColors : defaultColors
    options.value.series[0].data = list
    options.value.legend.data = list.map((item: {name: string}) => item.name)
  },
  {
    deep: true, // 开启深度监听
    immediate: true // 立即触发一次（可选）
  }
)
</script>
<template>
  <MyChart height="230px" :option="options" />
</template>
